<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<dom-module id="mist-notice">
    <template>
        <style include="shared-styles">
        :host {
        }

        .notice {
            background-color: #ffff8d;
            padding: 2px 16px;
            z-index: 9;
            position: relative;
            width: 100%;
            text-align: center;
        }

        a {
            width: 100%;
        }

        paper-icon-button {
            float: right;
            margin: -8px 24px 0px 0;
        }
        </style>
        <a href$="https://github.com/mistio/mist.io/releases/[[upgrade]]" hidden$=[[!upgrade]] target="_new">
        <div class="notice">
            <p><strong>Update available:</strong> [[upgrade]]
            <paper-icon-button icon="close" on-tap="_dismiss"></paper-icon-button>
            </p>
        </div>
        </a>
    </template>
    <script>
    Polymer({
        is: 'mist-notice',

        properties: {
            model: {
                type: Object
            },
            upgrade: {
                type: String,
                computed: '_computeUpgrade(model.user.available_upgrades.splices)',
                value: ''
            }
        },
        _computeUpgrade: function() {
            if (!this.model || !this.model.user || !this.model.user.available_upgrades || !this.model.user.available_upgrades.length)
                return '';
            if (localStorage.getItem('dismiss-' + this.model.user.available_upgrades[0].name))
                return '';
            return this.model.user.available_upgrades[0].name;
        },
        _dismiss: function(e) {
            localStorage.setItem('dismiss-' + this.upgrade, true);
            this.pop('model.user.available_upgrades');
            e.preventDefault();
        }
    });
    </script>
</dom-module>